<template>
  <div>
    <header id="header">
      <nav class="pure-menu pure-menu-horizontal">
        <a href="#header" class="pure-menu-heading pure-menu-link">
          <img :src="logo" alt="滴天髓(策划)有限公司" class="pure-img" />
        </a>
        <div class="menu-btn" @click="open">
          <img :src="require('@/assets/img/menu.png')" alt="菜单" />
        </div>
        <ul class="pure-menu-list">
          <li class="pure-menu-item">
            <a @click="handleScroll('header')" class="pure-menu-link">首页</a>
          </li>
          <li class="pure-menu-item" :class="{'active': cur ==='about-us'}">
            <a @click="handleScroll('about-us')" class="pure-menu-link">关于我们</a>
            <span class="line"></span>
          </li>
          <li class="pure-menu-item" :class="{'active': cur ==='intro'}">
            <a @click="handleScroll('intro')" class="pure-menu-link">产品介绍</a>
            <span class="line"></span>
          </li>
          <li class="pure-menu-item" :class="{'active': cur ==='coop'}">
            <a @click="handleScroll('coop')" class="pure-menu-link">商务合作</a>
            <span class="line"></span>
          </li>
          <li class="pure-menu-item" :class="{'active': cur ==='contact'}">
            <a @click="handleScroll('contact')" class="pure-menu-link">联系我们</a>
            <span class="line"></span>
          </li>
          <li class="close-btn" @click="close">
            <img :src="require('@/assets/img/close.png')" alt="" />
          </li>
        </ul>
      </nav>
      <div class="jump">
        <div class="text-center">
          <h1 class="big-title">{{ header.title }}</h1>
          <p
            v-for="sub of header.subtitle"
            :key="sub"
            v-text="sub"
            class="subtitle"
          ></p>
        </div>
      </div>
    </header>
    <main id="main">
      <section id="about-us" class="intro section">
        <div class="container">
          <div class="pure-g about-1">
            <div class="pure-u-lg-1-2 pure-u-sm-1-1">
              <h1 class="title">关于我们<span class="circles">
                <span class="circle c-1"></span>
                <span class="circle c-2"></span>
              </span></h1>
              <p class="subtitle">About Us</p>
              <p v-text="about_us[0]" class="pha"></p>
            </div>
            <div class="pure-u-lg-1-2 pure-u-sm-1-1">
              <img
                :src="require('@/assets/img/col1.png')"
                alt="毛笔"
                class="pure-img about-img"
              />
            </div>
          </div>
          <div class="pure-g about-2">
            <div class="pure-u-lg-1-2 pure-u-sm-1-1">
              <img
                :src="require('@/assets/img/col2.png')"
                alt="砚台"
                class="pure-img about-img"
              />
            </div>
            <div class="pure-u-lg-1-2 pure-u-sm-1-1">
              <p v-text="about_us[1]" class="pha"></p>
            </div>
          </div>
        </div>
      </section>
      <section class="intro section" id="intro">
        <div class="container">
          <div class="text-center intro-head">
            <h1 class="title">产品介绍<span class="circles">
                <span class="circle c-1"></span>
                <span class="circle c-2"></span>
              </span></h1>
            <p class="subtitle">Product Introduction</p>
            <p class="mute">融汇古今智慧 贯通东西文明</p>
            <p class="mute">传播中华文化 指点命理迷津</p>
          </div>
          <div class="pure-g intro-p">
            <div
              class="pure-u-md-1-5 intro-item-wrap"
              v-for="item of intro"
              :key="item.title"
            >
              <div class="intro-item">
                <h3>{{ item.title }}</h3>
                <p class="body" v-text="item.body"></p>
                <img :src="item.icon" alt="" class="pure-img" />
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="section coop" id="coop">
        <div class="container">
          <div class="text-center coop-head">
            <h1 class="title">
              商务合作<span class="circles">
                <span class="circle c-1"></span>
                <span class="circle c-2"></span>
              </span>
            </h1>
            <p class="subtitle">Business Cooperation</p>
            <p class="mute">通过滴天髓，提升产品</p>
            <p class="mute">用户、品牌的三重价值</p>
          </div>
          <p class="content" v-text="coop"></p>
          <div class="text-center coop-center">
            <p style="font-size:18px;color:#333;margin-top:110px;margin-bottom:160px;">我们提供的解决方案…</p>
          </div>
          <div class="pure-g coop-p">
            <div
              class="pure-u-1-2 pure-u-md-1-4 coop-item-wrap"
              v-for="item of coop_list"
              :key="item.title"
            >
              <div class="coop-item">
                <h3>{{ item.title }}</h3>
                <p class="body" v-text="item.body"></p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="contact" id="contact">
        <div class="container">
          <div class="contact-head">
            <h1 class="title">联系我们<span class="circles">
                <span class="circle c-1"></span>
                <span class="circle c-2"></span>
              </span></h1>
            <p class="subtitle">Contact Us</p>
          </div>
          <div class="pure-g">
            <div class="pure-u-1-2">
              <ul class="contact-list">
                <li v-for="item of contact" :key="item.type">
                  <a>
                    <img :src="item.icon" alt="图标Icon" class="pure-img" />
                    <span v-text="item.body"></span>
                  </a>
                </li>
              </ul>
              <ul class="qrcode-list">
                <li>
                  <figure>
                    <img :src="require('@/assets/img/qrcode.png')" alt="" />
                    <p>天髓公众号</p>
                  </figure>
                </li>
                <li>
                  <figure>
                    <img :src="require('@/assets/img/mp.png')" alt="" />
                    <p>天髓小程序</p>
                  </figure>
                </li>
              </ul>
            </div>
            <div class="pure-u-1-2" id="map">
              <baidu-map
                class="map-container"
                :dragging="map.dragging"
                :center="map.center"
                :zoom="map.zoom"
                :scroll-wheel-zoom="map.scroll"
              >
                <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
                  :showAddressBar="true"
                  :autoLocation="true"
                />
                <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
                <bm-info-window :position="{lng:113.946775,lat:22.5462}" title="滴天髓策划（深圳）有限公司" :show="map.show">
                  <p v-text="map.contents"></p>
                </bm-info-window>
              </baidu-map>
            </div>
          </div>
        </div>
      </section>
    </main>
    <footer id="footer" v-html="cp"></footer>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      header: {
        title: '国学传承 经典新生',
        subtitle: ['怀慈悲之心，积累功德，', '造福社会，奉献社会！'],
      },
      logo: require('@/assets/img/logo.png'),
      about_us: [
        '滴天髓策划（深圳）有限公司根植于中国传统文化，立志于弘扬国学传统经典，复兴中国传统文化。',
        '我司核心团队拥有对国学经典、周易理论、传统文化等多年积累与专业建树，精研人工智能与大数据，用先进的计算机科技实现易理的逻辑分析，把传统理论融入到计算机算法，并以通俗易懂的方式展示出来。以数据服务全球华人。',
      ],
      intro: [
        {
          title: '每日财运',
          body: '提供财势内容查看，全面解答你的个人运势走向，感情、事业、财运，应有尽有；',
          icon: require('@/assets/img/c1.png'),
        },
        {
          title: '个人分析',
          body: '从您的生辰五行中查看您的事业、财运、爱情、健康等分析结果；',
          icon: require('@/assets/img/c2.png'),
        },
        {
          title: '时辰守护',
          body: '时辰守护——驾驭每天、每时刻的人生气象；',
          icon: require('@/assets/img/c3.png'),
        },
        {
          title: '测算板块',
          body: '基于大数据分析，机器算法，精准预测。',
          icon: require('@/assets/img/c4.png'),
        },
        {
          title: '专业排盘',
          body: '为您呈现专业的排盘数据；',
          icon: require('@/assets/img/c5.png'),
        },
      ],
      coop: '我们希望追根溯源，把中华传统文化精髓融合在生活方方面面。滴天髓文化将会开放全平台品牌影响力、共享千万级用语数据、开放灵机数百位国学老师资源，以及滴天髓现有的上百种服务形式完全开放并可自行定制。我们希望所有的合作伙伴提供更好用户体验、更精确了解你用户的方式、更持续可发展的商业模式。',
      coop_list: [
        {
          title: '共享产品',
          body: '产品和服务形式可独立开发以及定制，适应PC、移运端等多种，极大提升流量价值和用户活跃。',
        },
        {
          title: '开放数据',
          body: '开放自身的产品数据和算法，帮助企业接入，企业可根据自身产品特点和用户需求，选取对应的传统文华服务式，挖掘用户价值。',
        },
        {
          title: '开放内容',
          body: '签约合作的上百位国学老师资源对接，专业人士协助，共同布局全媒体平台、音视频、直播等多元内容。',
        },
        {
          title: '开放品牌',
          body: '线下馆开放接入，同时开放线上资源接入，协助打通O2O模式，提升经营能力。',
        },
      ],
      contact: [
        {
          prefix: 'mail',
          body: `support@tiansuixiansheng.com`,
          icon: require('@/assets/img/mail.png'),
        },
        {
          prefix: 'phone',
          body: `18124584678`,
          icon: require('@/assets/img/phone.png'),
        },
        {
          prefix: 'normal',
          body: `深圳市南山区威盛科技大厦2105室`,
          icon: require('@/assets/img/map.png'),
        },
      ],
      cp: `<p>备案号：<a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2021040743号</a> 天髓策划有限公司 © 2021 All rights reserved.</p>`,
      map: {
        center: { lng: 113.946882, lat: 22.546621 },
        zoom: 18,
        title: '滴天髓策划(深圳)有限公司',
        contents: '威盛科技大厦2105室',
        show: true,
        scroll: true,
        dragging: true,
      },
      cur: 'home'
    }
  },
  methods: {
    handleScroll(id: string) {
      const width = document.body.offsetWidth
      if (width < 567) {
        this.close()
      }
      this.cur = id
      let elem = document.getElementById(id)
      elem?.scrollIntoView({ block: 'start', behavior: 'smooth' })
    },
    open() {
      const elem = <HTMLElement>document.querySelector('.pure-menu-list')
      if (elem) {
        elem.style.transform = 'translateX(0)'
      }
    },
    close() {
      const elem = <HTMLElement>document.querySelector('.pure-menu-list')
      if (elem) {
        elem.style.transform = 'translateX(120%)'
      }
    },
  }
})
</script>
<style>
* {
  box-sizing: border-box;
  color: #333;
}
.container {
  width: 1200px;
  margin: 0 auto;
}

#header .menu-btn,
#header .close-btn {
  display: none;
}
#footer {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;

  font-size: 12px;
}
#footer p {
  color: #e1e1e1;
}
.coop-center {
  margin-top: 110px;
  margin-bottom: 144px;
}
.coop-center .title {
  color: #841b20;
  margin-bottom: 20px;
}
.coop-item-wrap {
  display: flex;
  justify-content: center;
}
.coop-item {
  width: 150px;
  text-align: center;
}
.coop-item h3 {
  font-size: 18px;
  letter-spacing: 1px;
}
.coop-item .body {
  font-size: 14px;
  line-height: 22px;
  text-align: left;
}
.contact-head {
  margin-bottom: 110px;
}
#footer a {
  color: #e1e1e1;
  text-decoration: none;
}
section {
  height: 1080px;
  display: flex;
  align-items: center;
}
#header nav {
  z-index: 10;
  position: relative;
  top: 10px;
  width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
#header nav a {
  transition: 0.3s;
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
}
#header nav a img {
  width: 96px;
  height: 33px;
}
#header .pure-menu-active > .pure-menu-link,
.pure-menu-link:focus,
.pure-menu-link:hover {
  background-color: unset;
  color: #841b20;
}
#header nav .pure-menu-list {
  margin-left: auto;
}
#header {
  height: 1080px;
  background: url('~/assets/img/banner.png') no-repeat center center/cover;
  position: relative;
}
#header .jump {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  z-index: 5;
}
#header .jump .big-title {
  color: #fff;
  font-size: 62px;
  font-weight: 500;
  width: 100%;
  letter-spacing: 15px;
  text-shadow: 0 4px 7px rgba(0, 0, 0, 0.5);
  margin: 0;
  margin-bottom: 36px;
}
#header .jump .subtitle {
  color: #47494e;
  font-size: 18px;
  margin: 10px 0;
  letter-spacing: 3.75px;
}
section#coop {
  background: url('~/assets/img/coorp.png') no-repeat center center/cover;
}
section#intro {
  background: url('~/assets/img/intro.png') no-repeat center center/cover;
}
.about-img {
  width: 508px;
  height: 332px;
}
.about-2 {
  margin-top: 160px;
  align-items: center;
}
.about-1 {
  align-items: center;
}
.pha {
  width: 508px;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 2.5px;
}
.subtitle {
  font-size: 16px;
  color: #841b20;
  line-height: 22px;
  letter-spacing: 0.9px;
}
.title {
  font-size: 26px;
  letter-spacing: 1.4px;
  margin: 0;
  position: relative;
}
.title .circles {
  display: inline-block;
  position: relative;
  top: 8px;
  left: -5px;
  width: 0;
}
.title .circles .circle {
  display: block;
  width: 20px;
  height: 20px;
  background-color: #FF0000;
  opacity: 0.12;
  border-radius: 100%;
  transform: translate(-15%, 60%);
}
.title .circles .circle.c-1 {
  width: 26px;
  height: 26px;
}
.title .circles .circle.c-2{
  transform: translate(-50%,15%)
}

.text-center {
  text-align: center;
}
.mute {
  color: #999;
  font-size: 16px;
  letter-spacing: 0.9px;
  margin: 0;
  line-height: 24px;
}
.intro-head {
  margin-bottom: 160px;
}
.intro-item-wrap {
  padding: 0 10px;
  display: flex;
  justify-content: center;
}
.intro-item-wrap .intro-item {
  background: url(~/assets/img/intro-p.png) no-repeat center/cover;
  width: 185px;
  height: 288px;
  padding: 40px 25px 20px 25px;
  position: relative;
}
.intro-item h3 {
  font-size: 18px;
  letter-spacing: 1px;
  margin-top: 0;
  text-align: center;
  margin-bottom: 30px;
}
.intro-item .body {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.8px;
  margin-bottom: 14px;
}
.intro-item img {
  width: 50px;
  height: 50px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  bottom: 24px;
}
.coop-head {
  margin-bottom: 50px;
}
.content {
  margin: 0;
  line-height: 48px;
  font-size: 20px;
  letter-spacing: 4px;
}
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.contact-list li {
  margin-bottom: 30px;
}
.contact-list li a {
  display: flex;
  align-items: center;
  width: 310px;
  border-radius: 10px;
  transition: 0.3s;
  background: transparent;
  padding-left: 0;
}
.contact-list li a:hover {
  padding-left: 10px;
  background-image: none;
}
.contact-list li a img {
  width: 20px;
  height: 20px;
  margin-right: 14px;
}
.qrcode-list {
  display: flex;
  margin-left: 32px;
  margin-top: 60px;
}
.qrcode-list li {
  display: flex;
  margin-right: 6em;
}
.qrcode-list li figure {
  margin: 0;
}
.qrcode-list li img {
  width: 100px;
  height: 100px;
}
.qrcode-list li p {
  text-align: center;
}
#map {
  height: 400px;
  width: 600px;
}
.map-container {
  width: 100%;
  height: 100%;
}
@media (min-width:1024px) {
    #header nav ul.pure-menu-list .pure-menu-item span.line {
    position: absolute;
    left: 20px;
    bottom: -5px;
    display: block;
    width: 0;
    height: 3px;
    transition: 0.3s;
    background: #841b20;
  }

  #header nav ul.pure-menu-list .pure-menu-item:hover span.line,#header nav ul.pure-menu-list .pure-menu-item.active span.line {
    width: 80px;
  }
}
@media (max-width: 1024px) {
  #header {
    height: 768px;
  }
  main section {
    padding-top: 60px;
    height: auto;
  }
  #header nav {
    width: 100%;
  }
  .container {
    width: 100%;
    padding: 0 15px;
  }
  .pha {
    width: unset;
  }
  .about-1 .pha {
    padding-right: 20px;
  }
  .about-2 {
    margin-top: 0;
  }
  .about-2 .pha {
    padding-left: 20px;
  }
  .about-img {
    width: 100%;
    height: auto;
  }
  #about-us,
  #intro {
    height: 768px;
  }
  #contact #map {
    width: 50%;
  }
  #contact {
    padding-bottom: 60px;
  }
}
@media (max-width: 768px) {
  #header {
    height: 1024px;
  }
  main section {
    height: auto;
  }
  #about-us,
  #intro {
    height: auto;
  }
  .about-1 {
    margin-bottom: 15px;
  }
  .intro-item-wrap {
    width: 33.3%;
    margin-bottom: 15px;
  }
  .about-2 .pha {
    padding-left: 0;
  }
}
@media (max-width: 567px) {
  #header {
    height: 100vh;
  }
  #header nav {
    align-items: flex-start;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  #header .jump .big-title {
    font-size: 36px;
    letter-spacing: 3px;
  }
  #header nav ul.pure-menu-list {
    display: flex;
    flex-direction: column;
  }
  .intro-item-wrap {
    width: 50%;
  }
  .intro-item-wrap .intro-item {
    height: 240px;
    padding: 15px 20px;
  }
  #contact .container .pure-g > div {
    width: 100% !important;
  }
  #footer {
    padding: 0 15px;
  }
  .contact-head {
    margin-bottom: 0;
  }
  #contact {
    padding-bottom: 20px;
  }
  .qrcode-list {
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .coop-center {
    margin-bottom: 50px;
  }
  #header nav {
    background: #fff;
    box-shadow: rgb(0 0 0 / 14%) 0 0 8px 0;
  }
  #header nav ul.pure-menu-list {
    background: #fff;
    height: 100vh;
    transition: 0.3s;
    transform: translateX(120%);
    width: 100%;
    box-shadow: rgb(0 0 0 / 14%) 0 0 8px 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 3em;
  }
  #header nav ul.pure-menu-list .pure-menu-item {
    height: unset;
  }
  #header nav a {
    font-size: 24px;
    text-align: center;
  }
  #header .menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    margin-left: auto;
  }
  #header .menu-btn img {
    height: 33px;
  }
  #header .close-btn {
    display: block;
    margin-top: auto;
    margin-bottom: 20px;
    text-align: center;
  }
  #header .close-btn img {
    width: 50px;
    height: 50px;
  }
}
</style>
